<template>
  <!-- 头部组件 -->
  <div class="topBar_box">
    <el-row justify="space-between" align="middle" style="height: 100%">
      <el-col :span="12" class="left_col">{{ $t("components_TopBar.title") }}</el-col>
      <el-col :span="12" class="right_col">
        <el-dropdown
          trigger="click"
          class="el_dropdown"
          popper-class="el_dropdown_menu"
          @command="commandMenu"
        >
          <span class="el-dropdown-link">
            {{ $t("components_TopBar.language") }}：
            {{ currentLanguage || "--" }}
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in langArr" :key="index" :command="item">
                <span
                  :class="currentLanguage == mapLanguage(item) ? 'active' : ''"
                  >{{ mapLanguage(item) }}</span
                >
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
    </el-row>
  </div>
</template>
<script lang="ts" >
import {
  defineComponent,
  getCurrentInstance,
  toRaw,
  nextTick,
  ref,
  reactive
} from "vue";
import { ArrowDown } from "@element-plus/icons-vue";
import store from "@/store";
export default defineComponent({
  components: { ArrowDown },
  setup(prop, context) {
    const that:any = getCurrentInstance();
    let langArr: Array<string> = reactive([]);
    nextTick(() => {
      langArr.push(...(that?.proxy?.$i18n.availableLocales || ""));
    });
    return {
      langArr,
    };
  },
  computed: {
    currentLanguage(): string {
      const { $languageMap }: any = this;
      return $languageMap[store.state.currentLanguage];
    },
  },
  methods: {
    mapLanguage(str: string): string {
      const { $languageMap }: any = this;
      return $languageMap[str];
    },
    commandMenu(str: string | number | object): void {
      store.commit("setCurrentLanguage",str);
      this.$i18n.locale = store.state.currentLanguage;
    },
  },
  mounted() {},
});
</script>
<style scoped lang="scss">
.topBar_box {
  font-size: 24px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  .left_col{
    padding-left: 30px;
  }
  .right_col{
    text-align: right;
    padding-right: 30px;
  }
  .el_dropdown {
    .el-dropdown-link {
      cursor: pointer;
      color: var(--el-color-primary);
      display: flex;
      align-items: center;
    }
  }
}
.el_dropdown_menu {
  span {
    &.active {
      color: var(--el-color-primary);
    }
  }
}
</style>